<template>
  <splitpanes class="default-theme">
    <pane size="15" :min-size="0" max-size="50">
      <app-table ref="tableRef" @rowClick="tableClick" @rowRemove="closeApp"></app-table>
    </pane>
    <pane size="85" :min-size="0" max-size="100" style="height: 100%">
      <h3 v-if="tabs.length === 0">未打开应用</h3>
      <el-tabs v-else v-model="activeName" type="border-card" closable @tab-remove="removeTab" style="height: 100%">
        <el-tab-pane v-for="item in tabs" :key="item.appId" :name="item.appId" :label="item.appName" style="height: 100%">
          <app-info :app-info="item" @save="$refs.tableRef.loadSource()" style="height: 100%;"></app-info>
        </el-tab-pane>
      </el-tabs>
    </pane>
  </splitpanes>
</template>

<script>
import {Pane, Splitpanes} from "splitpanes";
import AppTable from "@/views/system/app/AppTable";
import AppInfo from "@/views/system/app/AppInfo";

export default {
  name: "AppManager",
  components: {AppInfo, AppTable, Splitpanes, Pane},
  data() {
    return {
      tabs: [],
      activeName: ''
    }
  },
  methods: {
    tableClick(row){
      const index = this.tabs.findIndex(item => item.appId === row.appId)
      if (index < 0) {
        this.tabs.push(this.$Util.copy(row))
      }
      this.activeName = row.appId
    },
    removeTab(key) {
      this.tabs = this.tabs.filter(tab => tab.appId !== key)
      if (this.tabs.length > 0) {
        this.activeName = this.tabs[0].appId
      }
    },
    closeApp(row) {
      this.removeTab(row.appId)
    }
  }
}
</script>

<style scoped>

</style>
